import React, { lazy } from 'react'
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import { useStore } from '@/store'

import './App.css'
/* import { renderRoutes } from 'react-router-config'
import routes from '@/routes' */

const loading = () => <div className="loader" />
const AppLayout = lazy(() => import('@/layouts'))

// pages
const Login = lazy(() => import('@/views/login'))

function App() {
  const { userStore } = useStore()
  userStore.loadToken()
  return (
    <BrowserRouter>
      <React.Suspense fallback={loading()}>
        <Switch>
          {/* TODO layout */}
          {/* {renderRoutes(routes)} */}
          <Route exact path="/login" render={(props) => <Login {...props} />} />

          <Route
            path="/"
            render={(props) => {
              if (!userStore.token) {
                return <Redirect exact to="login" {...props} />
              }
              return <AppLayout {...props} />
            }}
          />
        </Switch>
      </React.Suspense>
    </BrowserRouter>
  )
}

export default App
